<template>
	<view class="page_body">
		<view class="grid_box">
			<uni-grid :column="3"  :show-border="false" :square="false"  :hor="0" :highlight="false">
				<uni-grid-item v-for="(item ,index) in theme_list" :index="index"  :key="index" :hor="0" :ver="0">
					<view class="grid-item-box" @click="itemClick(item)">
						<image class="image" :src="item.img" mode="aspectFill" />
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<aui-loading ref="auiLoading" :type="5" :mask="true" :direction="col" :styles="{zIndex: 10001}" :theme="1" />
	</view>
</template>

<script>
	import api from './category.js'
	export default {
		data() {
			return {
				//主题列表
				theme_list: [],
			}
		},
		onReady() {
			this.getThemeList();
		},
		onLoad() {
			this.share.path= '/pages/category/category';
			uni.showShareMenu({
				withShareTicket:true,
				menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
			})
		},
		methods: {
			itemClick(theme){
				//传的是对像，转成json字符串;
				uni.navigateTo({
					url: '/pages/article_list/article_list?theme=' + encodeURIComponent(JSON.stringify(theme))
				})
			},
			//取年级及缓存;
			getCacheThemeList() {
				let that = this;
				that.$refs.auiLoading.show();
				uni.getStorage({
					key: 'cache_theme_list',
					success(res) {
						that.theme_list = res.data;
						if (null == that.theme_list || that.theme_list.length == 0) {
							that.getThemeList();
						} else {
							that.$refs.auiLoading.hide();
						}
					},
					fail() {
						that.getThemeList();
					}
				})
			},

			async getThemeList() {
				let that = this;
				let res = await api.getThemeList();
				that.theme_list = res.data.data;
				//写缓存;
				uni.setStorage({
					key: 'cache_theme_list',
					data: that.theme_list,
					success: function() {}
				});
				that.$refs.auiLoading.hide();
			},
		}
	}
</script>


<style lang="scss">
	@import "./category.scss";
	//@import "@/common/title_bar.css";
</style>
